<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            position: absolute;
        }
        .tab-content {
            padding: 16px 12px;
            position: relative;
            z-index: 11;
        }
        .Button_operation {
            width: 800px;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=QPqDrwOmVUUBNUzoz0ipIQIpSKpLrGlg"></script>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body style="height: 2000px">
<div id="app">
    <template>
        <el-tabs v-model="activeName">
            <el-tab-pane label="添加用户" name="first">
                <el-form ref="form" :inline="true" :model="formData" label-width="100px">
                    <el-form-item label="客户名称">
                        <el-input v-model="formData.companyName" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="法人">
                        <el-input v-model="formData.legal" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="法人联系电话">
                        <el-input v-model="formData.legalTel" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="固定电话">
                        <el-input v-model="formData.fixedTel" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="formData.companyEmail" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="客户地址">
                        <el-cascader
                                ref="cascader"
                                :props="casProps"
                                clearable
                                style="width: 200px"/>

                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input placeholder="详细地址" v-model="formData.companyAddress" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="经纬度">
                        <el-input
                                placeholder="需要确认地理位置"
                                v-model="formData.longitudeLatitude"
                                :disabled="true" style="width: 200px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="remark" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="客户简介">
                        <el-input type="textarea" v-model="formData.companyIntroduction" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 50px">
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button onclick="window.location.href = '/clients-list.html'">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="地理位置" name="second">
                <div class="Button_operation">
                    <div class="tab-content">
                        请输入地址：<el-input v-model="name" style="width: 150px"></el-input>
                        <el-button type="primary" @click="submit">查询</el-button>
                        <lable style="margin-left:93px">经纬度：</lable>
                        <el-input style="width: 185px;" id="result"></el-input>
                        <el-button type="warning" @click="setting">确定使用</el-button>
                        <div style="width: 800px;height: 800px;margin-top: 20px">
                            <div id="container"></div>
                        </div>
                    </div>
                </div>

            </el-tab-pane>
        </el-tabs>
    </template>
</div>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
          return{
              map: '',
              activeName:'first',
              name:'',
              formData:{
                  longitudeLatitude:'',
                  companyProvince:'',
                  companyCity:'',
                  companyArea:'',
                  companyName:'',
                  legal:'',
                  legalTel:'',
                  fixedTel:'',
                  companyEmail:'',
                  companyAddress:'',
                  companyIntroduction:'',
              },
              remark:'',
              casProps: {
                  lazy: true, // 此处必须为true
                  checkStrictly: true,
                  lazyLoad(node, resolve){
                      const { level } = node;
                      setTimeout(() => {
                          if (level===0){
                              axios.get('/Project').then(value => {
                                  if (value.data.state==1){
                                      const nodes = value.data.data.map(item => ({
                                          value: item.areaId,
                                          label: item.areaName,
                                          leaf: level >= 2
                                      }));
                                      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                                      resolve(nodes);
                                  }

                              })
                          }else if (level===1){
                              axios.get('/child/'+node.value).then(value => {
                                  if (value.data.state==1){
                                      const nodes = value.data.data.map(item => ({
                                          value: item.areaId,
                                          label: item.areaName,
                                          leaf: level >= 2
                                      }));
                                      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                                      resolve(nodes);
                                  }

                              })
                          }else {
                              axios.get('/child/'+node.value).then(value => {
                                  if (value.data.state==1){
                                      const nodes = value.data.data.map(item => ({
                                          value: item.areaId,
                                          label: item.areaName,
                                          leaf: level >= 2
                                      }));
                                      // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                                      resolve(nodes);
                                  }

                              })
                          }

                      }, 100);
                  }
              },
          }
        },
        methods:{
            onSubmit(){
                this.$confirm('确定要保存吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    if (this.$refs['cascader'].getCheckedNodes().length>0){
                        this.formData.companyProvince=this.$refs['cascader'].getCheckedNodes()[0].pathLabels[0];
                        this.formData.companyCity=this.$refs['cascader'].getCheckedNodes()[0].pathLabels[1];
                        this.formData.companyArea=this.$refs['cascader'].getCheckedNodes()[0].pathLabels[2];
                    }
                    axios.post("/SCompany/"+this.remark,this.formData).then(value => {
                        if (value.data.state==1){
                            this.$message({
                                type: 'success',
                                message: '使用成功!'
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            setting(){
                this.$confirm('确定要使用吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    this.formData.longitudeLatitude=document.getElementById("result").value;
                    this.$message({
                        type: 'success',
                        message: '使用成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });

                console.log(this.longitudeLatitude);
            },
            submit(){
                if (this.name){
                    var map=this.map;
                    var local= new BMapGL.LocalSearch(map, {
                        renderOptions:{map: map}
                    });
                    local.search(this.name);
                }else {
                    this.toBaiDu();
                }

            },
            toBaiDu(){
                this.map = new BMapGL.Map('container');
                this.map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
                this.map.enableScrollWheelZoom(true);
                this.map.addEventListener('click', function (e) {
                    document.getElementById("result").value = e.latlng.lng.toFixed(6) + "," + e.latlng.lat.toFixed(6);
                });
            }
        },
        mounted(){
            this.toBaiDu();
        }
    })
</script>
</body>
</html>